У меня проблема в моем проекте.Я хочу автоматически нажимать на мою текстовую область автоматически после добавления пользователем видео YouTube через iframe.Но не знаю, как этого добиться.
Вот то, что я пытаюсь
document.getElementById('youtube_select').onclick = function () {
var youtube = jQuery('input[name=youtube]:checked').val();
if(youtube) {
if(typeof(clickedElement) != "undefined"){
clickedElement.after('<iframe style="width: 95%;height: 400px;" src="https://www.youtube.com/embed/' + youtube + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><p><br></p>');
} else {
jQuery('.medium-editor-element').append('<iframe style="width: 95%;height: 400px;" src="https://www.youtube.com/embed/' + youtube + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><p><br></p>');
}
jQuery("#textarea").focus();
}
}
, и вот элемент, который добавлен в мою текстовую область
<div class="col-xs-12">
<div class="textarea-field editor">
<div class="form-control textarea medium-editor-element" id="medium-editor-1538377761979" onkeyup="auto_grow(this)" placeholder="Start writing" name="content" cols="50" rows="10" medium-editor-textarea-id="medium-editor-1538377761979" contenteditable="true" spellcheck="true" data-medium-editor-element="true" role="textbox" aria-multiline="true" data-medium-editor-editor-index="1" medium-editor-index="b41ef202-8466-bd3b-2659-be0c9528b8ef" data-placeholder="Type your text" style="height: 84px;" data-medium-focused="true"><p>uiiuiuiu</p><p><br></p><iframe style="width: 95%;height: 400px;" src="https://www.youtube.com/embed/EU7PRmCpx-0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe><p><br></p></div>
<textarea class="form-control textarea medium-editor-hidden" id="textarea" onkeyup="auto_grow(this)" placeholder="Start writing" name="content" cols="50" rows="10" medium-editor-textarea-id="medium-editor-1538377761979" style="height: 0px;"></textarea>
</div>
<div class="toolbox active">
<a href="#" id="quick-add"><img src="http://192.168.1.122/bemediav2/public/img/frontend/plus.png" alt=""></a>
<div class="toolbox-option">
<ul>
<li><a id="quick-close" href="#"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-close.png" alt=""></a></li>
<li><a href="javascript:void(0)" id="uploadimage"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-img.png" alt=""></a></li>
<li><a data-toggle="modal" data-target="#upload_Media" href="javascript:void(0)"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-video.png" alt=""></a></li>
<li><a href="javascript:void(0)" data-toggle="modal" data-target="#uploadlink"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-link.png" alt=""></a></li>
<li><a href="#"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-audio.png" alt=""></a></li>
<li><a href="#"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-add.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
Идентификатор youtube_select здесь.Это в модале.На модал нажимают, когда я нажимаю на upload_Media
<div class="modal fade modal-vcenter" tabindex="-1" role="dialog" id="upload_Media">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>{{ __('sidebar.searchyoutube') }}</h3>
<a href="#" class="modall-close" data-dismiss="modal"><img src="{{ URL::to('/') }}/img/frontend/close-icon.png" alt=""></a>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<div class="searchbox_wrapper">
{!! Form::open(['method'=>'POST', 'id'=>'youtubesearch']) !!}
<div class="search_block">
<input type="text" class="form-control" id="search" name="search" placeholder="{{ __('sidebar.searchyoutube') }}">
<input type="button" class="post_submit3" onclick="youtubesearch();">
</div><!-- search_block-->
{!! Form::close() !!}
</div>
<div class="image_container">
<div class="tab_row">
<div class="scroll_section scroll_block">
<div class="row">
<div class="image_list">
<ul class="youtube_search"></ul>
</div><!-- image_list-->
</div>
</div><!-- scroll_section-->
<div class="bottom_shape"></div>
</div> <!-- tab_row-->
</div><!-- search_block-->
<div class="media_bottom">
<input type="button" class="submit_select" id="youtube_select" value="{{ __('sidebar.use') }}" data-dismiss="modal">
<a href="#" class="cancel_btn2" data-dismiss="modal">{{ __('sidebar.cancel') }}</a>
</div><!-- media_bottom-->
</div>
</div>
</div>
</div>
</div>
</div>
Я выбрал мое видео на YouTube здесь
@foreach($youtubes->items as $youtube)
<li class="image_height">
<input type="radio" name="youtube" value="{{ $youtube->id->videoId }}" id="{{ $loop->iteration }}" />
<label class="checkbox_common" for="{{ $loop->iteration }}"><img src="{{ $youtube->snippet->thumbnails->default->url }}" alt=""/></label>
<label class="check_tick"><img src="{{ URL::to('/') }}/img/frontend/check-tick.svg" alt=""/></label>
</li>
@endforeach
И мой контроллер для получения видео:
public function youtubesearch(Request $request) {
$developer_key = 'myKey';
$youtubes = [];
if ($request->get('search')) {
$format_keyword = implode("+", explode(" ", $request->get('search')));
$url = "https://www.googleapis.com/youtube/v3/search?q=$format_keyword&order=viewCount&part=snippet&type=video&maxResults=32&key=" . $developer_key;
$arr_result = json_decode(file_get_contents($url));
if (isset($arr_result->items) && !empty($arr_result->items)) {
$youtubes = $arr_result;
}
}
$view = View::make('frontend.include.youtube', compact('youtubes'));
$html = $view->render();
$response = array('html' => $html);
return response()->json($response);
}