개발나라 스용공주

[생활코딩] HTML 왕기초 10장 - Visual Studio Code / 유튜브 동영상 바로 실행하기 본문

WEB/HTML & CSS

[생활코딩] HTML 왕기초 10장 - Visual Studio Code / 유튜브 동영상 바로 실행하기

스용공주 2024. 6. 20. 18:50
728x90
728x90

이번 글은 아래 강의를 바탕으로 작성하였습니다.

(생활코딩)

https://www.youtube.com/watch?v=7T7r_oSp0SE&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb&index=24

 

 

[ 유튜브 동영상 바로가기 ]

아래 사진과 같이 영상 실행버튼을 실행하면 별도의 창 생성 없이 해당 창에서 바로 실행되는 것을 만들어 볼 것이다.

 

 

먼저 유튜브에서 영상을 하나 선택한 뒤 '공유' 버튼을 누르면 아래와 같이 뜬다.

 

퍼가기를 누르면 아래 사진처럼 <iframe>태그의 소스코드가 뜨게 된다.

이 코드들을 복사해서 붙여넣어준다.

 

<!doctype html>
<html>
<head>
    <title>Introduce Youtube</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>Youtuber</h1>
    <ol>
        <li><a href="index.html">Youtube</a></li>
        <li><a href="2.html">Contents</a></li>
    </ol>
    <h2>Introducing My Youtube Contents</h2>
    <P>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/1pBoUsMzqZE?si=Loif9sowegTarQ6S" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </P>
    <p>Vietnam Danang Vlog -> <a href="https://www.youtube.com/watch?v=1pBoUsMzqZE" title="Danang Vlog">Link</a></p>
</body>
</html>

 

 

그럼 아래 사진과 같이 새 탭 실행 없이 바로가기가 뜨게 된다.

 

 

 

 

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[생활코딩] CSS 왕기초 11장 - Visual Studio Code / CSS 태그 우선순위  (0) 2024.06.21
[생활코딩] CSS 왕기초 10장 - Visual Studio Code / CSS의 style  (0) 2024.06.20
[생활코딩] HTML 왕기초 9장 - Visual Studio Code / 링크 걸기  (0) 2024.06.18
[생활코딩] HTML 왕기초 8장 - Visual Studio Code / HTML 구조  (0) 2024.06.18
[생활코딩] HTML 왕기초 7장 - Visual Studio Code / 목차 생성하기  (0) 2024.06.18
'WEB/HTML & CSS' Related Articles more
Comments